const Index = () => {
  return (
    <div>
      <div></div>
      <h3>react项目一般可分为两种情况：</h3>
      <p>1，无权限的简单项目</p>
      <p>
        routes路由数据为全部页面路由，直接将全部的routes数据传递给react-router，
        菜单数据根据路由数据在前端本地定义，面包屑则根据菜单数据形成。
      </p>
      <p>2，有权限的正常项目</p>
      <div>
        routes路由数据还是为全部页面路由【这里推荐分为两类路由，静态路由即登录，首页，404等不需要权限的路由数据，另外的动态路由则为需要权限的路由】
        后端根据登录账号的权限返回动态的路由数据，然后与前端的路由数据进行匹配过滤，最后将过滤后的数据与静态路由合并到传递给react-router，
        这样react路由就只会渲染有权限的路由，不会存在通过修改url访问到无权限的路由情况，
        最后面包屑则是根据权限路由对应生成。
      </div>
      <h3>react路由和vue路由不一样</h3>
      <p>
        react路由的子路由需要把父级路由的path添加上，即有一个嵌套页面的path为/nest，那么它的子路由path为/nest/nest1，而不是单单只写/nest1，这和vue不一样。
      </p>
      <h3>问题备注：</h3>
      <p>
        菜单的defaultSelectedKeys属性可以满足默认的菜单跳转和刷新，但是通过navLink跳转某个菜单，没有高亮菜单，所以应该使用selectedKeys
      </p>
      <div style={{ height: 500 }}></div>
    </div>
  );
};

export default Index;
